
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>控制后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/static/admin/css/other/console1.css" />
</head>
<body class="pear-container">
<div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">用户数量</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;">
                            {$count.user}
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <span class="icon pear-icon" style="font-size: 40px">&#xe6e0;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">VIP用户</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;">
                            {$count.vip}
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <span class="icon pear-icon" style="font-size: 40px">&#xe697;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">文件数量</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;">
                            {$count.file}
                        </div>
                        <div class="layui-col-xs4 layui-col-md4  top-panel-tips">
                            <span class="icon pear-icon" style="font-size: 40px">&#xe6a4;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">文件大小</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;">
                            {$count.size}
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <span class="icon pear-icon" style="font-size: 40px">&#xe6ad;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!--</div>-->
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
    layui.use(['layer', 'echarts', 'element'], function() {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            echarts = layui.echarts;

        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        var option = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [{
                type: 'category',
                data: [{$time_type|raw}],
                axisLine: {
                    lineStyle: {
                        color: "#999"
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                splitNumber: 4,
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#DDD'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#333"
                    },
                },
                nameTextStyle: {
                    color: "#999"
                },
                splitArea: {
                    show: false
                }
            }],
            tooltip: {
                valueSuffix: ' 个',
                    crosshairs: true,
                    shared: true
            },
            legend: {
                layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
            },
            series: [
            {
                name: '注册',
                type: 'line',
                color: 'rgba(0,242,59,246)', marker: { radius: 6 }, data: [{$series_reg|raw}]
            },
            {
                name: '成功订单',
                type: 'line',
                color: 'rgba(0,15,182,59)', marker: { radius: 6 }, data: [{$series_order|raw}]
            },
            {
                name: '金额',
                type: 'line',
                color: 'rgba(0,92,219,192)', marker: { radius: 6 }, data: [{$series_money|raw}]
            }
            ]
        };

        echartsRecords.setOption(option);

        window.onresize = function() {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
